<template>
  <div class="app-main-container">
    <div class="doumee-filter">
      <el-form inline label-suffix="：" @submit.native.prevent>
        <el-form-item :label="$t('message.sbh')">
          <el-input v-model="filters.number" :placeholder="$t('message.qsr') + $t('message.sbh')" clearable />
        </el-form-item>
        <el-form-item :label="$t('message.sbzt')">
          <el-select v-model="filters.status" :placeholder="$t('message.qxz') + $t('message.sbzt')" clearable>
            <el-option
              v-for="item in openStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-preventReClick type="primary" @click="getList(1)">{{ $t('message.cz') }}</el-button>
          <el-button v-preventReClick @click="clear">{{ $t('message.clear') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="meta.indexOf('PDAAddOrUpdate') > -1 || meta.indexOf('PDABatchUpdate') > -1" class="doumee-table-buttons">
      <el-button v-if="meta.indexOf('PDAAddOrUpdate') > -1" v-preventReClick type="primary" style="margin-right: 10px" @click="addDevice">{{ $t('message.xzsb') }}</el-button>
      <el-button v-if="meta.indexOf('PDABatchUpdate') > -1" v-preventReClick type="primary" style="margin-right: 10px" @click="addDeviceb">{{ $t('message.plgxkjpz') }}</el-button>
    </div>
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column align="center" :label="$t('message.sbh')" prop="number" min-width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          <span class="ckxqBtn" @click="orderBtn(scope.row)"> {{ scope.row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('message.sbmc')" prop="name" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.hycj')" prop="orderTypeName" min-width="140" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.createTime')" prop="createTime" min-width="160" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.czr')" prop="creator" min-width="120" show-overflow-tooltip />
      <el-table-column align="center" :label="$t('message.sbzt')" min-width="120" fixed="right">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="'1'"
            :disabled="meta.indexOf('PDAHandle') == -1"
            :inactive-value="'0'"
            @change="toConfigUpdate($event, scope.row.id, scope.row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column :label="$t('message.caozuo')" align="center" fixed="right" min-width="120">
        <template slot-scope="scope">
          <div v-if="meta.indexOf('PDAAddOrUpdate') > -1 || meta.indexOf('PDAHandle') > -1" class="flex-cc">
            <el-button v-if="meta.indexOf('PDAAddOrUpdate') > -1" v-preventReClick type="text" @click="toEdit(scope.row)">{{ $t('message.edit') }}</el-button>
            <el-button v-if="meta.indexOf('PDAHandle') > -1 && scope.row.status == 0" v-preventReClick class="secondColor" type="text" @click="rowDel(scope.row)">{{ $t('message.del') }}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />

    <el-drawer :title="newPrinter.showDetail == 1? $t('message.sbxq'):newPrinter.id? $t('message.bjsb'): $t('message.xzsb')" :visible.sync="dialogTableVisible" size="800px" @close="dialogTableVisible = false">
      <template v-if="newPrinter.showDetail == 1">
        <div class="df_ac">
          <div>
            <span class="key">{{ $t('message.sbmc') }}：</span>
            <span class="value">{{ newPrinter.name }}</span>
          </div>
          <div>
            <span class="key">{{ $t('message.sbh') }}：</span>
            <span class="value">{{ newPrinter.number }}</span>
          </div>
          <div>
            <span class="key">{{ $t('message.status') }}：</span>
            <span class="value">{{ newPrinter.status == 1?$t('message.qy'):$t('message.jy') }}</span>
          </div>
          <div>
            <span class="key">{{ $t('message.createTime') }}：</span>
            <span class="value">{{ newPrinter.createTime }}</span>
          </div>
          <div v-if="newPrinter.creator">
            <span class="key">{{ $t('message.czr') }}：</span>
            <span class="value">{{ newPrinter.creator }}</span>
          </div>
        </div>
        <div class="table">
          <div class="head">
            <div>{{ $t('message.hycj') }}</div>
            <div>{{ $t('message.hyfw') }}</div>
          </div>
          <div v-for="(item, index) in newPrinter.orderType" :key="index" class="cnt">
            <div>{{ fhname(item) }}</div>
            <div>{{ fhobj(item) }}</div>
          </div>
          <div v-if="!newPrinter.orderType || newPrinter.orderType.length === 0" class="wu">{{ $t('message.zwhycj') }}</div>
        </div>
      </template>
      <el-form
        v-else
        ref="newPrinter"
        class="doumee-form"
        :model="newPrinter"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item :label="$t('message.sbbh')" prop="number">
          <el-input
            v-model="newPrinter.number"
            :disabled="newPrinter.id"
            class="input-style"
            :placeholder="$t('message.qsr') + $t('message.sbbh')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.sbmc')" prop="name">
          <el-input
            v-model="newPrinter.name"
            class="input-style"
            :placeholder="$t('message.qsr') + $t('message.sbmc')"
          />
        </el-form-item>
        <el-form-item :label="$t('message.status')" prop="status">
          <el-select v-model="newPrinter.status" :placeholder="$t('message.qxz') + $t('message.sbzt')" clearable style="width: 100%;">
            <el-option
              v-for="item in openStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('message.hycj')" prop="orderType">
          <el-checkbox-group v-model="newPrinter.orderType">
            <el-checkbox v-for="item in cjList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.hygz')">
          <div class="table">
            <div class="head">
              <div>{{ $t('message.hycj') }}</div>
              <div>{{ $t('message.hyfw') }}</div>
              <div>{{ $t('message.caozuo') }}</div>
            </div>
            <div v-for="(item, index) in newPrinter.orderType" :key="index" class="cnt">
              <div>{{ fhname(item) }}</div>
              <div>{{ fhobj(item) }}</div>
              <div class="pizhi" @click="showBtn(item)">{{ $t('message.pizhi') }}</div>
            </div>
            <div v-if="!newPrinter.orderType || newPrinter.orderType.length === 0" class="wu">{{ $t('message.zwhycj') }}</div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="cancel">{{ $t('message.qx') }}</el-button>
          <el-button v-preventReClick :loading="subLoading" type="primary" @click="save">{{ $t('message.qr') }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog
      :title="$t('message.sqsz')"
      :visible.sync="showCd"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :append-to-body="true"
      top="20vh !important"
      width="500px"
    >
      <el-checkbox-group v-model="obj2">
        <el-checkbox v-for="item in cqList" :key="item.id" :label="item.id">{{ item.areaName }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showCd = false">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="confirmCd"
        >{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('message.mpsz')"
      :visible.sync="showMp"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :append-to-body="true"
      top="20vh !important"
      width="500px"
    >
      <el-checkbox-group v-model="obj3">
        <el-checkbox v-for="item in mpList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showMp = false">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="confirmMp"
        >{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="$t('message.tcsz')"
      :visible.sync="showTc"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :append-to-body="true"
      top="20vh !important"
      width="500px"
    >
      <el-checkbox-group v-model="obj4">
        <el-checkbox v-for="item in tcList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showTc = false">{{ $t('message.qx') }}</el-button>
        <el-button
          v-preventReClick
          type="primary"
          @click="confirmTc"
        >{{ $t('message.qr') }}</el-button>
      </div>
    </el-dialog>
    <el-drawer :title="$t('message.gxkjpz')" :visible.sync="dialogTableVisibleb" size="800px" @close="dialogTableVisibleb = false">
      <el-form
        ref="newPrinterb"
        class="doumee-form"
        :model="newPrinter"
        :rules="rules"
        label-width="auto"
      >
        <el-form-item :label="$t('message.shibei')" prop="flag">
          <el-radio-group v-model="newPrinter.flag">
            <el-radio label="0">{{ $t('message.qbsb') }}</el-radio>
            <el-radio label="1">{{ $t('message.zdsb') }}</el-radio>
          </el-radio-group>
          <div v-if="newPrinter.flag == 1" style="width: 100%;">
            <el-checkbox-group v-model="newPrinter.ids">
              <el-checkbox v-for="item in list" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item :label="$t('message.hycj')" prop="orderType">
          <el-checkbox-group v-model="newPrinter.orderType">
            <el-checkbox v-for="item in cjList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :label="$t('message.hygz')">
          <div class="table">
            <div class="head">
              <div>{{ $t('message.hycj') }}</div>
              <div>{{ $t('message.hyfw') }}</div>
              <div>{{ $t('message.caozuo') }}</div>
            </div>
            <div v-for="(item, index) in newPrinter.orderType" :key="index" class="cnt">
              <div>{{ fhname(item) }}</div>
              <div>{{ fhobj(item) }}</div>
              <div class="pizhi" @click="showBtn(item)">{{ $t('message.pizhi') }}</div>
            </div>
            <div v-if="!newPrinter.orderType || newPrinter.orderType.length === 0" class="wu">{{ $t('message.zwhycj') }}</div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogTableVisibleb = false">{{ $t('message.qx') }}</el-button>
          <el-button v-preventReClick :loading="subLoading" type="primary" @click="saveb">{{ $t('message.qr') }}</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { pdaList, pdaHandle, pdaDetail, pdaBatchUpdate, addOrUpdate, orderTypeList, getAreaList, pdampList, pdatcList } from '@/api'
import { parseTime } from '@/utils'
import store from '@/store'
export default {
  name: 'Scjgl',
  data() {
    return {
      modalDialog: store.getters.dialog,
      subLoading: false,
      pagination: {
        page: 1,
        rows: 10
      },
      showCd: false,
      showMp: false,
      showTc: false,
      dialogTableVisible: false,
      dialogTableVisibleb: false,
      totalCount: 10,
      list: [],
      listLoading: true,
      openStatus: [
        { value: '0', label: this.$t('message.jy') },
        { value: '1', label: this.$t('message.qy') }
      ],
      sbXz: [
        { value: '0', label: this.$t('message.qbsb') },
        { value: '1', label: this.$t('message.zdsb') }
      ],
      filters: {},
      newPrinter: {},
      meta: [],
      cjList: [],
      cqList: [],
      mpList: [],
      tcList: [],
      obj2: [],
      obj3: [],
      obj4: [],
      rules: {
        name: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.sbmc'), trigger: 'blur' }
        ],
        number: [
          { required: true, message: this.$t('message.qsr') + this.$t('message.sbbh'), trigger: 'blur' }
        ],
        status: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.sbzt'), trigger: 'blur' }
        ],
        orderType: [
          { required: true, message: this.$t('message.qxz') + this.$t('message.hycj'), trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
    this.getCjlist()
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    toGetAreaList() {
      const venueId = sessionStorage.getItem('venueId')
      getAreaList({ param: { venueId }}).then(res => {
        this.cqList = res.recordList
        this.showCd = true
      })
    },
    toGetMpList() {
      const venueId = sessionStorage.getItem('venueId')
      pdampList({ param: { venueId }}).then(res => {
        this.mpList = res.recordList
        this.showMp = true
      })
    },
    toGetTcList() {
      const venueId = sessionStorage.getItem('venueId')
      pdatcList({ param: { venueId }}).then(res => {
        this.tcList = res.recordList
        this.showTc = true
      })
    },
    showBtn(s) {
      if (s === '02') {
        this.obj2 = this.newPrinter.obj2
        this.toGetAreaList()
      }
      if (s === '03') {
        this.obj3 = this.newPrinter.obj3
        this.toGetMpList()
      }
      if (s === '04') {
        this.obj4 = this.newPrinter.obj4
        this.toGetTcList()
      }
    },
    confirmCd() {
      this.showCd = false
      this.$set(this.newPrinter, 'obj2', this.obj2)
    },
    confirmMp() {
      this.showMp = false
      this.$set(this.newPrinter, 'obj3', this.obj3)
    },
    confirmTc() {
      this.showTc = false
      this.$set(this.newPrinter, 'obj4', this.obj4)
    },
    // 获取核验场景
    getCjlist() {
      orderTypeList({ param: { type: 'PDA_CHECK_ORDER_TYPE' }})
        .then((res) => {
          if (res.errorCode !== '000000') return
          this.cjList = res.recordList
        })
    },
    fhname(s) {
      const arr = [...this.cjList]
      let name = ''
      arr.forEach(e => {
        if (s === e.id) {
          name = e.name
        }
      })
      return name
    },
    fhobj(s) {
      let name = ''
      if (s === '02') {
        if (this.newPrinter.obj2 && this.newPrinter.obj2.length > 0) {
          name = this.newPrinter.obj2.length + this.$t('message.gcq')
        } else {
          name = this.$t('message.qbcq')
        }
      } else if (s === '03') {
        if (this.newPrinter.obj3 && this.newPrinter.obj3.length > 0) {
          name = this.newPrinter.obj3.length + this.$t('message.gmp')
        } else {
          name = this.$t('message.qbmp')
        }
      } else if (s === '04') {
        if (this.newPrinter.obj4 && this.newPrinter.obj4.length > 0) {
          name = this.newPrinter.obj4.length + this.$t('message.gtc')
        } else {
          name = this.$t('message.qbtc')
        }
      }
      return name
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    rowDel(row) {
      this.$confirm(this.$t('message.sctc'), this.$t('message.ts'), {
        confirmButtonText: this.$t('message.qd'),
        cancelButtonText: this.$t('message.qx'),
        type: 'warning'
      }).then(() => {
        pdaHandle({
          param: { id: row.id, type: '2' }
        }).then(res => {
          if (res.errorCode !== '000000') return
          this.$message.success(this.$t('message.delcg'))
          this.getList()
        })
      })
    },
    toConfigUpdate(e, id, status) {
      pdaHandle({ param: { id, status, type: '1' }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          this.$message.success(this.$t('message.xgcg'))
        }
        this.getList()
      }).catch(() => {})
    },
    addDevice() {
      this.newPrinter = {
        orderType: [], status: '0', obj2: [], obj3: [], obj4: []
      }
      this.dialogTableVisible = true
    },
    addDeviceb() {
      this.newPrinter = {
        orderType: [], status: '0', obj2: [], obj3: [], obj4: [], flag: '0', ids: []
      }
      this.dialogTableVisibleb = true
    },
    orderBtn(item) {
      pdaDetail({ param: { id: item.id }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          this.dialogTableVisible = true
          const obj = res.record
          obj.creator = item.creator
          obj.createTime = item.createTime
          obj.showDetail = 1
          const arr = obj.useItem
          const orderType = []
          let obj2 = []
          let obj3 = []
          let obj4 = []
          arr.forEach(e => {
            orderType.push(e.orderType)
            if (e.orderType === '02') {
              if (e.obj) {
                obj2 = e.obj.split(',')
              } else {
                obj2 = []
              }
            } else if (e.orderType === '03') {
              if (e.obj) {
                obj3 = e.obj.split(',')
              } else {
                obj3 = []
              }
            } else if (e.orderType === '04') {
              if (e.obj) {
                obj4 = e.obj.split(',')
              } else {
                obj4 = []
              }
            }
          })
          obj.orderType = orderType
          obj.obj2 = obj2
          obj.obj3 = obj3
          obj.obj4 = obj4
          this.newPrinter = obj
        }
        this.getList()
      }).catch(() => {})
    },
    toEdit(item) {
      pdaDetail({ param: { id: item.id }}, sessionStorage.getItem('venueId')).then(res => {
        if (res.errorCode === '000000') {
          this.dialogTableVisible = true
          const obj = res.record
          const arr = obj.useItem
          const orderType = []
          let obj2 = []
          let obj3 = []
          let obj4 = []
          arr.forEach(e => {
            orderType.push(e.orderType)
            if (e.orderType === '02') {
              if (e.obj) {
                obj2 = e.obj.split(',')
              } else {
                obj2 = []
              }
            } else if (e.orderType === '03') {
              if (e.obj) {
                obj3 = e.obj.split(',')
              } else {
                obj3 = []
              }
            } else if (e.orderType === '04') {
              if (e.obj) {
                obj4 = e.obj.split(',')
              } else {
                obj4 = []
              }
            }
          })
          obj.orderType = orderType
          obj.obj2 = obj2
          obj.obj3 = obj3
          obj.obj4 = obj4
          this.newPrinter = obj
        }
        this.getList()
      }).catch(() => {})
    },
    getList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      pdaList({ pagination, gymId: sessionStorage.getItem('venueId'), param: { venueId, ...filters }}, sessionStorage.getItem('venueId')).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.totalCount = res.totalCount
          if (res.totalCount && res.recordList.length === 0 && pagination.page > 1) {
            this.getList(Math.ceil(res.totalCount / pagination.rows))
          }
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    clear() {
      this.filters = {}
      this.getList()
    },
    cancel() {
      this.dialogTableVisible = false
    },
    saveb() {
      this.$refs.newPrinterb.validate((valid) => {
        if (valid) {
          const param = { ...this.newPrinter }
          const useItem = []
          const arr = [...param.orderType]
          arr.forEach(e => {
            if (e === '02') {
              useItem.push({
                useType: e,
                useObject: param.obj2.join(',')
              })
            } else if (e === '03') {
              useItem.push({
                useType: e,
                useObject: param.obj3.join(',')
              })
            } else if (e === '04') {
              useItem.push({
                useType: e,
                useObject: param.obj4.join(',')
              })
            }
          })
          param.useItem = useItem
          this.subLoading = true
          pdaBatchUpdate({ param }, sessionStorage.getItem('venueId')).then(res => {
            this.subLoading = false
            if (res.errorCode === '000000') {
              this.dialogTableVisibleb = false
              this.$message.success(this.$t('message.editcg'))
              this.getList()
            }
          }).catch(err => {
            this.subLoading = false
            console.log(err)
          })
        }
      })
    },
    save() {
      this.$refs.newPrinter.validate((valid) => {
        if (valid) {
          const param = { ...this.newPrinter }
          const useItem = []
          const arr = [...param.orderType]
          arr.forEach(e => {
            if (e === '02') {
              useItem.push({
                useType: e,
                useObject: param.obj2.join(',')
              })
            } else if (e === '03') {
              useItem.push({
                useType: e,
                useObject: param.obj3.join(',')
              })
            } else if (e === '04') {
              useItem.push({
                useType: e,
                useObject: param.obj4.join(',')
              })
            }
          })
          param.useItem = useItem
          this.subLoading = true
          if (this.newPrinter.id) {
            addOrUpdate({ param }, sessionStorage.getItem('venueId')).then(res => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.dialogTableVisible = false
                this.$message.success(this.$t('message.editcg'))
                this.getList()
              }
            }).catch(err => {
              this.subLoading = false
              console.log(err)
            })
          } else {
            addOrUpdate({ param }, sessionStorage.getItem('venueId')).then(res => {
              this.subLoading = false
              if (res.errorCode === '000000') {
                this.dialogTableVisible = false
                this.$message.success(this.$t('message.addcg'))
                this.getList()
              }
            }).catch(err => {
              this.subLoading = false
              console.log(err)
            })
          }
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.table {
			line-height: 50px;
			font-size: 13px;
			color: #222222;
			border: 1px solid #E5E5E5;
			border-radius: 4px;
			overflow: hidden;

			.head {
				background-color: #E8EBF7;
        font-weight: bold;
			}

			.cnt {
				border-top: 1px solid #E5E5E5;
			}

			.head,
			.cnt {
				display: flex;

				div {
					flex: 1;
          border-left: 1px solid #E5E5E5;
					height: 50px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					/* autoprefixer: off */
					-webkit-box-orient: vertical;
					/* autoprefixer: on */
					line-height: 50px;
					text-align: center;

					&:first-of-type {
						border-left: none
					}
				}
			}
		}
    .pizhi {
      color: $primaryColor;
      cursor: pointer;
    }
    .wu {
      border-top: 1px solid #E5E5E5;
      line-height: 50px;
			font-size: 13px;
			color: #222222;
      text-align: center;
    }
    .df_ac {
  flex-wrap: wrap;
  div {
    width: 50%;
    margin-bottom: 20px;
    .key {
  color: #666666;
  display: inline-block;
}
.value {
  color: #222;
}
  }
}
</style>
